<template>
  <div class="solution-wrap">
    <div class="sw-types">
      <div class="sw-type-item">
        <img src="@/assets/ipx-proxy-s-1-active.png" class="img" />
        <p class="title">
          <span>Rotating Residential proxies</span>
          <span class="price-tips">Enjoy 42% off</span>
        </p>
      </div>
      <div class="sw-type-item" @click="toStaticResidential('1')">
        <img src="@/assets/ipx-proxy-s-2.png" class="img" />
        <p class="title">
          <span>Static Residential Proxies</span>
          <span class="price-tips">Up to 45% off</span>
        </p>
      </div>
      <div class="sw-type-item">
        <a href="https://t.me/IPXProxyService" target="_blank">
          <img src="@/assets/ipx-proxy-s-3.png" class="img" />
          <p class="title">
            <span>Custom Plan</span>
            <a class="price-tips" href="https://t.me/IPXProxyService" rel="nofollow">Contact Sales</a>
          </p>
        </a>
      </div>
    </div>
    <div class="ps-tips">All of the proxies should be used in the network outside of mainland China.IPXproxy does not provide any form of wall-robbing services, and users are strictly prohibited from engaging in any illegal and criminal behavior.</div>
    <div class="sw-type-main">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item, index) in props.data && props.data.length ? props.data : Array(5).fill({})" :key="index">
            <div class="main-item" >
              <div class="mi-head">{{ item.title || '-' }}</div>
              <div class="mi-body">
                <del>Original price: ${{ item.orig_amount || '-' }}</del> <span>Current price: <b>${{ item.amount || '-' }}</b></span>
              </div>
              <div class="mi-body-1">
                <span class="s1">
                  Traffic: <b>{{ item.combo || '-' }}</b>
                </span>
                <span class="s2">
                  <span>Limit: </span>
                  <b>{{ item.desc || '-' }}</b>
                </span>
              </div>
              <div class="mi-foot">
                <div class="foot-item" v-for="(subitem, subindex) in item.item ? item.item : Array(7).fill('')" :key="subindex">
                  <span>{{ subitem || '-' }}</span>
                </div>
                <a href="javascript:void(0);" class="buy" @click="onBuy(item)">Pay Now</a>
              </div>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Navigation -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
    </div>

    <Pay ref="payRef" payType="dynamic" />
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import { useUserStore } from '@/store/modules/user';
  import Pay from '../pay/en.vue';

  const route = useRoute();
  const router = useRouter();
  const userStore = useUserStore();

  const getUserInfo = computed(() => {
    let userInfo = userStore.getUserInfo || {};
    return userInfo;
  });

  const props = defineProps<{
    data: Array;
  }>();

  const emits = defineEmits<{
    (event: 'confirm'): void;
    (event: 'log'): void;
  }>();

  const payRef = ref();

  const onBuy = (item) => {
    emits('log', item);
    payRef.value.onBuy({
      ...item,
      payType: 'dynamic',
    });
  };

  const toStaticResidential = (name) => {
    router.push({
      path: '/center/staticResidential',
      query: {
        name,
        t: new Date().getTime(),
      },
    });
  };

  onMounted(() => {});
</script>

<style scoped lang="scss"></style>
